
<template>
  <div class="device">
    <div class="header">
      <el-select
        v-model="onlineStatus"
        placeholder="请选择设备在线状态"
        style="margin: 0 10px"
      >
        <el-option label="离线" value="离线"></el-option>
        <el-option label="在线" value="在线"></el-option>
      </el-select>
      <el-select v-model="bdStatus" clearable placeholder="请选择设备绑定状态">
        <el-option
          v-for="item in bdStatusOpt"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-input
        v-model="inputVal"
        clearable
        placeholder="请输入内容"
        style="width: 180px"
      ></el-input>

      <el-button type="success" style="margin: 0 10px">搜索</el-button>

      <el-button type="success" style="float: right" @click="showDrawer"
        >录入</el-button
      >
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        type="index"
        :index="1"
        prop="data"
        label="序号"
        width="90"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="serial_number"
        label="编号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="name" label="名称" min-width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="online_status"
        label="在线状态"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.online_status == 0">
            {{ scope.row.online_status == 0 ? "离线" : "在线" }}
          </el-tag>
          <el-tag type="success" v-if="scope.row.bind_status == 1">
            {{ scope.row.online_status == 0 ? "离线" : "在线" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="bind_status"
        label="绑定状态"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.bind_status == 0">
            {{ scope.row.bind_status == 0 ? "未绑定" : "已绑定" }}
          </el-tag>
          <el-tag type="success" v-if="scope.row.bind_status == 1">
            {{ scope.row.bind_status == 0 ? "未绑定" : "已绑定" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="data" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="editBtn(scope.row)">修改</el-button>
          <el-button
            type="text"
            @click="deleteBtn(scope.row.id)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-drawer :title="title" :visible.sync="drawer" direction="rtl" size="40%">
      <span
        ><el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="padding: 10px"
        >
          <el-form-item label="编号" prop="serial_number">
            <el-input
              v-model="ruleForm.serial_number"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="drawer = false">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form></span
      >
    </el-drawer>
  </div>
</template>
<script>
import { get, postJSON, del } from "../../utils/request";
export default {
  data() {
    return {
      onlineStatus: '',
      bdStatus: '',
      bdStatusOpt: [
        {
          label: "未绑定",
          value: "未绑定",
        },
        {
          label: "已绑定",
          value: "已绑定",
        }
      ],
      inputVal: "",
      tableData: [],
      drawer: false,
      ruleForm: {
        name: "",
        serial_number: "",
        id: "",
      },
      rules: {
        serial_number: [
          { required: true, message: "请输入编号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      title:'',
    };
  },
  created() {
    this.getDeviceList();
  },
  methods:{
    getDeviceList() {
      get("/device/pageQuery", {
        page: 1,
        pageSize: 10,
        name: '',
        bind_status: '',
        online_status: '',
      }).then((res) => {
        if (res && res.status == 200 && res.data && res.data.list) {
          this.tableData = res.data.list;
        } else {
          this.tableData = [];
        }
      })
    },

    editBtn(row) {
      console.log(777, row);
      this.drawer = true;
      this.title = "修改设备信息";
      this.ruleForm = {
        serial_number: row.serial_number,
        name: row.name,
        id: row.id,
      };
    },

  addDevice() {
    postJSON("/device/saveOrUpdate", this.ruleForm).then((res) => {
      console.log(555, res);
    });
  },

  deleteBtn(id) {
    del("/device/deleteById", {
      id: id
    }).then((res) => {
      console.log(666, res);
      if (res && res.status == 200) {
        this.$notify({
          title: "成功", 
          message: "删除成功",
          type: "success",
        });
        this.getDeviceList();
      } else {
        this.$$notify.error({
          title: "错误",
          message: "删除失败",
        });
      }
    })
  },

  //打开抽屉
  showDrawer() {
    this.drawer = true;

    this.title = "添加设备信息";

    this.ruleForm = {};
    this.$refs['ruleForm'].resetFields()
  },

  handleClose(done) {
    done();
    // this.$confirm('确认关闭？') 
    //   .then(_ => {

    //   }).catch(_ => {});
  },

  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        postJSON("/device/saveOrUpdate", this.ruleForm).then((res) => {
          console.log(555, res);
          if (res && res.status == 200) {
            if (this.ruleForm.id) {
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
              });
          }else {
              this.$notify({
                title: "成功",
                message: "添加成功",
                type:"success"
              });
              }
              this.drawer = false;
            this.getDeviceList();
          }else{
            this.$notify.error({
                title: "错误",
                message: "添加失败",
              });
          }
        });
      }else{
        console.log('error submit');
        return false;
      }
    });
  }
}
}


</script>

<style scoped lang="scss">
.device {
  padding: 5px;
  .header {
    margin-bottom: 10px;
  }
}
</style>
